---
target: Umo Office Viewer
keywords: Umo Office Viewer,office在线预览,wps在线预览,docx在线预览,word在线预览,pdf在线预览
description: Umo Office Viewer 是一款 Office 文档查看器，支持在 Web 页面中查看 40 余种主流的办公文档。
---

# 主题与样式

Umo Office Viewer 主要的主题变量使用 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)声明，我们推荐使用替换 CSS 变量的方式来进行个性化的主题配置。

## 主题模式

- `theme: 'light' | 'dark' | 'auto'`
  - `light`：浅色主题
  - `dark`：深色主题
  - `auto`：跟随系统深/浅色；当系统主题变化时自动同步

内部实现：
- 当 `theme !== 'auto'` 时，在 `html` 节点设置属性 `theme-mode="light|dark"`
- 当 `theme === 'auto'` 时，监听系统媒体查询 `(prefers-color-scheme: dark)` 并动态切换

你也可以通过方法进行切换：

```ts
viewerRef.value?.setTheme('dark')
viewerRef.value?.setTheme('auto')
```

## 默认主题（CSS 变量）

```css
:root {
  /** 主题色 **/
  --uv-primary-color: #3480f9;
  --uv-color-white: #fff;
  --uv-color-black: #000;

  /** 字体相关 **/
  --uv-font-family: helvetica neue, helvetica, pingfang sc, hiragino sans gb,
    microsoft yahei, simsun, sans-serif;
  --uv-font-size: 14px;
  --uv-font-size-small: 12px;
  --uv-text-color: rgb(51, 54, 57);
  --uv-text-color-light: rgba(0, 0, 0, 0.5);

  /** 布局相关 **/
  --uv-header-height: 56px;
  --uv-container-background: #f4f5f7;
  --uv-page-shadow: rgba(0, 0, 0, 0.06) 0 0 10px 0,
    rgba(0, 0, 0, 0.04) 0 0 0 1px;

  /** 边框与阴影 **/
  --uv-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.03),
    0 8px 10px 1px rgba(0, 0, 0, 4%), 0 5px 5px -3px rgba(0, 0, 0, 8%);
  --uv-border-color: rgba(0, 0, 0, 0.08);
  --uv-border-color-light: rgba(0, 0, 0, 0.05);

  /** 圆角 **/
  --uv-radius: 3px;
  --uv-radius-medium: 5px;

  /** 弹出层 **/
  --uv-popup-max-height: max(60vh, 180px);
  --uv-mask-color: transparent;

  /** 滚动条 **/
  --uv-scrollbar-size: 6px;
  --uv-scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
  --uv-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);
}
```

## 暗色主题（CSS 变量）

```css
[theme-mode='dark'] {
  --uv-color-white: #17171a;
  --uv-color-black: #fff;
  --uv-text-color: #ddd;
  --uv-text-color-light: #bbb;
  --uv-border-color: rgba(255, 255, 255, 0.15);
  --uv-border-color-dark: rgba(255, 255, 255, 0.2);
  --uv-border-color-light: rgba(255, 255, 255, 0.08);
  --uv-container-background: #2a2b2d;
}
```

## 变量说明与分组

- 主题色：`--uv-primary-color`
- 基础色：`--uv-color-white`、`--uv-color-black`
- 字体与文本：`--uv-font-family`、`--uv-font-size`、`--uv-font-size-small`、`--uv-text-color`、`--uv-text-color-light`
- 布局背景与阴影：`--uv-container-background`、`--uv-page-shadow`
- 边框与阴影：`--uv-border-color`、`--uv-border-color-light`、`--uv-shadow`
- 圆角：`--uv-radius`、`--uv-radius-medium`
- 弹出层：`--uv-popup-max-height`、`--uv-mask-color`
- 滚动条：`--uv-scrollbar-size`、`--uv-scrollbar-thumb-color`、`--uv-scrollbar-thumb-hover-color`

## 覆盖方式与示例

在容器作用域内覆盖变量，推荐使用局部类名避免影响全局。

```vue
<template>
  <div class="viewer-theme">
    <umo-office-viewer :theme="theme" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const theme = ref<'light' | 'dark' | 'auto'>('light')
</script>

<style>
.viewer-theme {
  --uv-primary-color: #ff4444; /* 修改主题色 */
  --uv-container-background: #f7f8fa; /* 修改背景 */
  --uv-scrollbar-size: 8px; /* 修改滚动条尺寸 */
}

/* 暗色下的局部覆盖 */
html[theme-mode='dark'] .viewer-theme {
  --uv-text-color: #eaeff4;
  --uv-border-color: #31363b;
}
</style>
```

## 常见自定义

- 修改主题色：`--uv-primary-color`
- 调整字体大小：`--uv-font-size`、`--uv-font-size-small`
- 调整容器背景：`--uv-container-background`
- 调整滚动条外观：`--uv-scrollbar-*`
